{% extends "base.html" %}

{% block head %}
{{block.super}}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% endblock %}

{% block content %}

<div class="container">
  <h1>Plot using Plot.ly</h1>
  <p class="lead">Ajax test!</p>
</div>
<!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-md-12"><div id="plot">{{plot|safe}}</div></div>
  </div>
</div>
<!-- /.container -->

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <button id="button" type="button" class="btn btn-primary" data-loading-text="Loading..." >Change number of graphics</button>
      <div id=time></div>
    </div>
  </div>
</div>
<!-- /.container -->

<div class="container">
  <p>
    &nbsp;
  </p>
  <a class="btn btn-primary pull-right" href="{% url 'index' %}"> Go back to index...</a>
</div>
{% endblock %}

{% block tail %}
{{block.super}}
<script>
// Set up the buttons
$("#button").click(function() {
  var btn = $(this);
  btn.button('loading');
  // Then whatever you actually want to do i.e. submit form
  // After that has finished, reset the button state using
  var n = Math.floor((Math.random() * 50) + 1);
  $.ajax({
    url: "{% url 'app1:plot1d_multiple_ajax' n=1234 %}".replace('1234',""+n),
    type: 'get', // This is the default though, you don't actually need to always mention it
    success: function(data) {
        $('#plot').empty().append(data);
        btn.button('reset');
    },
    failure: function(data) {
        alert('Got an error dude!');
        btn.button('reset');
    },
    start_time: new Date().getTime(),
    complete: function(data) {
        var message = 'Time: '+(new Date().getTime() - this.start_time)+' ms for ' + n + ' lines.';
        // console.log(message);
        $("#time").html('<br/><p class="lead">' + message + '</p>');
    }
  });

});
</script>
{% endblock %}
